<template>
    <div class="about">
        <h1 @click="clickbtn">{{ msg }}</h1>
        {{ Listdata }}---?????----{{ ListdataNow }}
        <router-view></router-view>
    </div>
</template>
<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex';
export default {
    data() {
        return {
            msg: '存入vuex,这里是紧急修改的bug'
        };
    },
    computed: {
        // 取值辅助函数
        ...mapState('user', ['Listdata']),
        ...mapGetters('user', ['ListdataNow'])
    },
    methods: {
        // vuex存值,辅助函数以及非辅助函数的用法
        // ...mapActions('user', ['saveUserInfo']),
        // ...mapMutations('user', ['saveMutation']),
        // clickbtn() {
        //     // this.$store.dispatch('user/saveUserInfo', { name: '苏明' });
        //     // this.$store.commit('user/saveMutation', { name: '苏明' });
        //     this.saveUserInfo({ name: '苏明' });
        // },
        async getInit() {
            const result = await getInitApi();

            // 操作result
        }
    },
    created() {
        console.log('about页面传递过来的参数params', this.$route.params);
        console.log('about页面传递过来的参数query', this.$route.query);
        //    vuex非辅助函数取值方式
        // let Listdata = this.$store.state.user.Listdata;
        this.$store.state.user.Listdata = [
            {
                news: '俄乌战场实1111况.....'
            }
        ];
        console.log(
            'vuex取出来的值是',
            this.$store.getters['user/ListdataNow']
        );
        this.getInit(); //初始化页面调用首页刷新数据
    },
    activated() {
        // 组件激活状态进入,并且不走别的周期
        console.log('我是About的active组件');
    },
    deactivated() {
        console.log('我是About的deactive组件');
    }
    // // 组件独享的钩子函数
    // beforeRouteEnter() {},
    // beforeRouteUpdate() {
    //     // 动态路由更新时候触发这个钩子
    //     //         传递的参数
    //     // 发生变化就会触发这个钩子函数
    // },

    // beforeRouteLeave() {}
};
</script>
<style scoped>
h1 {
    color: aqua;
}
</style>
